<template>
  <el-dialog v-model="isModalVisible" width="80%" title="查看详情" :append-to-body="true" @close="closeModal">
    <div class="info" v-loading="loading">
      <div>
        <div class="right-color">成交信息</div>
        <div class="right-div">
          <el-form label-width="auto" inline>
            <el-form-item label="成交商户：" prop="name">{{ infos?.companyName }}</el-form-item>
            <el-form-item label="品类：" prop="zone">{{ infos?.categoryTypeName }}</el-form-item>
            <el-form-item label="成交商品：" prop="time">{{ infos?.productTypeName }}</el-form-item>
          </el-form>
          <el-form label-width="auto" inline>
            <el-form-item label="成交金额(元)：" prop="name">{{ infos?.amount }}</el-form-item>
            <el-form-item label="支付积分：" prop="name">{{ infos?.paymentPoints }}</el-form-item>
            <el-form-item label="付费人员：" prop="name">{{ infos?.payer }}</el-form-item>
            <el-form-item label="成交时间：" prop="time">{{ infos?.transactionTime }}</el-form-item>
          </el-form>
        </div>
      </div>
      <el-divider />
      <div>
        <div class="right-color">需求信息</div>
        <div class="right-div">
          <el-form label-width="auto" inline>
            <el-form-item label="品类商品：" prop="name">{{ infos?.requirementProductTypeName }}</el-form-item>
            <el-form-item label="空间：" prop="name">{{ infos?.spaceTypeName }}</el-form-item>
            <el-form-item label="采买时间：" prop="time">{{ infos?.purchaseTypeName }}</el-form-item>
            <el-form-item label="预算：" prop="time">{{ infos?.budget }}</el-form-item>
            <el-form-item label="发布时间：" prop="time">{{ infos?.publishTime }}</el-form-item>
            <el-form-item label="业主备注：" prop="name">{{ infos?.ownerRemark }}</el-form-item>
          </el-form>
        </div>
      </div>
      <el-divider />
      <div>
        <div class="right-color">基本信息</div>
        <div class="right-div">
          <el-form label-width="auto" inline>
            <el-form-item label="业主姓名：" prop="name">{{ infos?.ownName }}</el-form-item>
            <el-form-item label="联系电话：" prop="zone">{{ infos?.mobile }}</el-form-item>
            <el-form-item label="房屋户型：" prop="name">{{ infos?.houseType }}</el-form-item>
            <el-form-item label="房屋面积：" prop="zone">{{ infos?.size }}㎡</el-form-item>
            <el-form-item label="房屋地址：" prop="zone">{{ infos?.houseAddress }}</el-form-item>
          </el-form>
        </div>
      </div>
      <el-divider />
      <div class="bom">
        <div class="right-color">分账信息</div>
        <div class="right-div">
          <el-form label-width="auto" inline>
            <el-form-item label="商户抽佣比例：" prop="name">{{ infos?.merchantCommission * 100 }}%</el-form-item>
            <el-form-item label="品类基础比例：" prop="zone">{{ infos?.categoryCommission * 100 }}%</el-form-item>
            <el-form-item label="卖场：" prop="name">{{ infos?.mallRatio * 100 }}%</el-form-item>
            <el-form-item label="业主：" prop="zone">{{ infos?.consumerRatio * 100 }}%</el-form-item>
            <el-form-item label="C端裂变：" prop="zone">{{ infos?.inviteRatio * 100 }}%</el-form-item>
          </el-form>
          <el-form label-width="auto" inline>
            <el-form-item label="成交金额(元)：" prop="name">{{ infos?.amount }}</el-form-item>
            <el-form-item label="商户支付：" prop="zone">{{ infos?.paymentPoints }}</el-form-item>
            <el-form-item label="卖场分佣：" prop="name">{{ infos?.mallCommissionPoints }}</el-form-item>
            <el-form-item label="业主分佣：" prop="zone">{{ infos?.conCommissionPoints }}</el-form-item>
            <el-form-item label="C端裂变：" prop="zone">{{ infos?.inviteCommissionPoints }}</el-form-item>
            <el-form-item label="平台分佣：" prop="zone">{{ infos?.platCommissionPoints }}</el-form-item>

          </el-form>

        </div>
      </div>
      <div>
        <el-button type="primary" style="width: 150px;" @click="clickBut('next')">下一单</el-button>
        <el-button type="primary" style="width: 150px;" @click="clickBut('previous')">上一单</el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script setup lang="ts">
import transactionApi from '@/api/transactionRecord/index'

const isModalVisible = ref(false)
const infos = ref()
const loading = ref(false)

const emit = defineEmits(["nextBut"]);



function openModal(row: any) {
  getDetails(row.id)
  isModalVisible.value = true;
}


function closeModal() {
  isModalVisible.value = false;

}

function clickBut(val: any) {
  emit('nextBut', val)
}

async function getDetails(id: number) {
  try {
    loading.value = true
    const res = await transactionApi.getDetail(id)
    console.log(res);
    infos.value = res.data
    loading.value = false

  } catch (error) {
    loading.value = false
  }
}

defineExpose({
  openModal,
});
</script>


<style lang="scss" scoped>
.info {

  .right-color {
    border-left: 4px solid #4095FE;
    padding-left: 10px;
    font-size: 16px;
    font-weight: 600;
  }

  .right-div {
    padding-left: 20px;
  }
}
</style>
